<template>
  <div class="ver" style="width:650px;">
    <el-autocomplete
      class="inline-input"
      v-model="searchName"
      :fetch-suggestions="querySearch"
      placeholder="请输入地址名称"
      :trigger-on-focus="false"
      style="width:650px;"
      clearable
      @select="handleSelect"
    ></el-autocomplete>
    <div style="height: 20px;"></div>
    <div id="container" style="width:650px; height:400px"></div>
    <div class="hor mg-t-20">
      <div class="flex1"></div>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onEnter">确定</el-button>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  // import AMap from 'AMap'
  import AMapLoader from '@amap/amap-jsapi-loader';

  // Vue.use(AMap);
  let _this;
  export default {
    props: ['lat', 'lng', "searchName", "address"],
    data() {
      return {
        map: {},
        searchName: "",
        initLat: 30.657468,
        initLng: 104.065692,
        //搜索结果
        poiList: [],
        AMap: null,

        selectMarker: null,//当前选择的marker
        selectAddress: null//当前选择的地址
      };
    },
    mounted() {
      _this = this
      this.initMap();

    },
    methods: {
      initMap() {
        console.log("初始化地图")
        AMapLoader.load({
          "key": "0cda2c27c8178349956b47cbd7f3c440", // 申请好的Web端开发者Key，首次调用 load 时必填
          "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          "AMapUI": { // 是否加载 AMapUI，缺省不加载
            "version": '1.1', // AMapUI 缺省 1.1
            "plugins": [] // 需要加载的 AMapUI ui插件
          },
          "Loca": { // 是否加载 Loca， 缺省不加载
            "version": '1.3.2' // Loca 版本，缺省 1.3.2
          }
        }).then((AMap) => {
          _this.AMap = AMap;
          _this.map = new AMap.Map('container', {
            resizeEnable: true,
            zoom: 15
          });

          let change = false
          if (!_this.isEmpty(this.lat)) {
            _this.initLat = this.lat
            change = true;
          }
          if (!_this.isEmpty(this.lng)) {
            _this.initLng = this.lng
            change = true;
          }
          _this.moveMapTo(_this.initLat, _this.initLng);

          if (change) {//如果有定位点的话则标记上marker
            //模拟cb组件的入参
            const e = {
              lat: _this.initLat,
              lng: _this.initLng,
              name: _this.searchName,
              value: _this.address
            }
            _this.handleSelect(e)
          }

        }).catch(e => {
          console.log(e);
        })

        // this.map = new AMap.Map('container', {
        //   resizeEnable: true,
        //   zoom: 15
        // });

      }, querySearch(queryString, cb) {//查询搜索触发
        // console.log(queryString);
        // console.log(cb)
        // 调用 callback 返回建议列表的数据
        this.searchPOI(queryString, cb)

      }, handleSelect(e) {//快捷联想提示
        // console.log(e)
        this.moveMapTo(e.lat, e.lng)

        // 移除已创建的 marker
        if (this.selectMarker != null) {
          this.map.remove(this.selectMarker);
        }

        // 创建一个 Marker 实例：
        this.selectMarker = new _this.AMap.Marker({
          position: new _this.AMap.LngLat(e.lng, e.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '北京'
        });

        // 将创建的点标记添加到已有的地图实例：
        this.map.add(this.selectMarker);

        this.selectAddress = e;
      }, searchPOI(queryString, cb) {
        const _this = this;
        _this.AMap.plugin(["AMap.PlaceSearch"], function () {
          //构造地点查询类
          var placeSearch = new _this.AMap.PlaceSearch({
            type: '', // 兴趣点类别
            pageSize: 10, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "", // 兴趣点城市
            // city: "成都市", // 兴趣点城市
            citylimit: true, //是否强制限制在设置的城市内搜索
            map: _this.map, // 展现结果的地图实例
            // panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });

          placeSearch.search(queryString, function (status, result) {
            _this.map.clearMap();
            console.log(result)

            const searchlist = [];
            if (result.poiList != null) {
              _this.poiList = result.poiList.pois;
              for (let i = 0; i < _this.poiList.length; i++) {
                const value = {
                  "value": _this.poiList[i].name + "，" + _this.poiList[i].address + "（" + _this.poiList[i].pname + _this.poiList[i].cityname + _this.poiList[i].adname + ")",
                  "lat": _this.poiList[i].location.lat,
                  "lng": _this.poiList[i].location.lng,
                  "name": _this.poiList[i].name
                };
                searchlist.push(value);
              }


              // console.log(JSON.stringify(_this.poiList))
            }
            cb(searchlist);//插入到联想列表
          });
        });
      }, moveMapTo(lat, lng) {
        this.map.panTo([lng, lat]);
      }, onCancel() {
        this.$emit('onCancel'); //通知父组件改变。
      }, onEnter() {
        if (this.selectAddress == null) {
          this.$message({
            message: '请选择地址',
            type: 'warning'
          });
        }
        this.$emit('onEnter', this.selectAddress); //通知父组件改变。
      }
    }
  };
</script>
